#introduction{
          margin: 20px;
          border-radius: 12px;
          background-color: wheat;
          height: auto;
        }
        
        #introduction_first{
          display: flex;
          height: auto;
          align-items: center;
          margin: 30px;
          justify-content: center;
          padding: 30px;
          
          
        }

        #introduction_first img, #introduction_second img{
          width: 60%;
          height: 400px;
          object-fit:cover;
          border-radius:12px;
          box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);
          z-index:1;
        }

        #introduction_first_text, #introduction_second_text{
          border-radius:12px;
          box-shadow:0 8px 12px rgba(0, 0, 0, 0.3);
          z-index: 2;
          position: relative;
          margin-left: -30px;
          height: auto;
          max-width: 40%;
          padding: 20px;
          background-color: antiquewhite;

          opacity: 0;
          transform: translateX(60px);
          transition: all 0.8s ease-in-out;
        }

        #introduction_first_text.show{
          opacity:1;
          transform: translateX(0);

        }

        #introduction_second{
          margin-top: -30px;
          display: flex;
          align-items: center;
          justify-content: space-evenly;
          gap: 60px;
          padding:30px;
          
        }

        #introduction_second_text{
          
          transform: translateY(90px);
        }

        #introduction_second img{
          height: auto;
          width: 35%;
          
        }

        #introduction_second_text.show{
          opacity:1;
          transform: translateY(-120px);

        }

        /*phone layout for the introduction section*/
        @media(max-width:768px) {
            #introduction_first,#introduction_second{
                flex-direction: column;
                margin: 0 10px;
                padding: 10px 0;
                gap: 10px;

                
            }

            #introduction_second{
                flex-direction: column-reverse;
            }

            #introduction_first img, #introduction_second img{
                width: 100%;
                transform: none;
            }

            #introduction_first_text, #introduction_second_text{
                width: 100%;
                max-width: 100%;
                transform: none;
                margin-left:0;
                padding: 16px;
            }

            #introduction_second_text.show {
                transform: none;
            }
        }







        #why{
          display:flex;
          background-color: beige;
          border-radius:12px;
          margin: 30px;
          justify-content: space-around;
          align-items:center;
          box-shadow:0 4px 8px rgba(0, 0, 0, 0.3);
          padding: 30px;
        }

        
        
        .why_content{
          padding-left: 20px;
          width: 40%;
          height: auto;
          background-color: wheat;
          border-radius: 12px;
          box-shadow:0 8px 12px rgba(0,0,0,0.4);
          line-height: 1.7;
        }

        @media(max-width:768px) {
            #why{
                flex-direction: column;
                gap: 15px;
                padding: 10px;
                margin: 10px;
            }

            .why_content{
                width: 100%;
                
            }
        }

        
        #why_adoption{
          display: flex;
          margin: 30px;
          border-radius: 12px;
          background-color: #fff7e6;
          padding: 30px;
          align-items: center;
          justify-content: space-around;
          gap: 30px;
        }

        #why_text{
          
          display: flex;
          justify-content: center;
          flex-direction: column;
          gap: 20px;
          align-items: center;
          margin: 30px;
          flex:1;
        }

        #why_content{
          background-color: antiquewhite;
          border-radius: 12px;
          box-shadow:0 4px 8px rgba(0, 0, 0, 0.2);
          
          margin: auto;
          padding: 20px;
          
          width: 55%;
        }

        #why_text p{
          height: auto;
          background-color: wheat;
          border-radius: 12px;
          box-shadow: 0 8px 12px rgba(0, 0, 0, 0.3);
          padding: 16px;
          max-width: 500px;
        }

        #why_adoption img{
          width: 45%;
          object-fit: cover;
          border-radius: 12px;
          overflow: hidden;
          box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
        }

        /*phone layout for the why part*/
        @media (max-width:768px) {
            #why_adoption{
                flex-direction: column-reverse;
                padding: 0;
                margin: 15px;
            }

            #why_content{
                width: 100%;
                padding: 10px;
            }

            #why_adoption img{
                width: 100%;
            }
        }
        






        .floating-arrow{
          height: 0;
          width: 0;
          border-left: 16px solid transparent;
          border-right: 16px solid transparent;

          border-top: 20px solid orange;
          margin: 20px auto 0;

          animation: floatArrow 1.5s infinite ease-in-out;
        }

        @keyframes floatArrow {
          0%, 100%{transform: translateY(0); opacity: 1}
          50% {transform: translateY(10px); opacity: 0.5;}
        }

        .intro-callout {
          background: linear-gradient(to bottom, #fff7e6, #ffeccc);
          padding: 24px 32px;
          border-radius: 16px;
          text-align: center;
          font-size: 20px;
          color: #333;
          box-shadow: 0 8px 16px rgba(0,0,0,0.2);
          max-width: 600px;
          margin: 20px auto;
        }

        #adopt-section{
          display: flex;
          justify-content: center;
        }

        .adopt-button {
          display: inline-block;
          margin: 10px auto;
          padding: 16px 32px;
          background-color: #ffa500;
          color: white;
          font-weight: bold;
          font-size: 18px;
          border-radius: 12px;
          text-decoration: none;
          box-shadow: 0 6px 12px rgba(0,0,0,0.2);
          transition: all 0.3s ease;
        }

        .adopt-button:hover {
          background-color: #ff8800;
          transform: translateY(-5px);
        
        }

        #want_adopt{
          background-image: url("/Image_about/tiandi.jpg");
          width: 100%;
          height: 800px;
          display: flex;
          align-items: center;
          justify-content: center;
          box-sizing: cover;
          background-position: center;
          border-top: #ff8800 solid 10px;
        }

        footer {
            text-align: center;
            margin-top: 30px;
            color: #888;
            font-size: 14px;
            margin-bottom:30px;
        }